<template>
	<div id="cityList">
		<div class="current">
		  <p class="city_text">当前位置</p>
		  <van-cell :title="userInfo == null ? '未能获取到当前位置信息' : userInfo.address.city" icon="location" />
		</div>
		<div class="hot">
			<p class="city_text">热门城市</p>
			<div class="city_list">
				<div class="loadModule" v-if="show">
					<van-loading color="#0094ff" verticle>正在努力加载中...</van-loading>
				</div>
				<span v-for="(hot_city, hot_index) in hotCityList" :key="hot_index" class="hotCity" @click="searchCity(hot_city)">{{hot_city}}</span>
			</div>
		</div>
		<van-index-bar>
			<div v-for="(category, c_index) in allCityList" :key="c_index">
				<van-index-anchor :index="category.key" />
				<van-cell :title="city" v-for="(city, city_index) in category.value" :key="city_index" @click="searchCity(city)"/>
			</div>
		</van-index-bar>
	</div>
</template>

<script>
	export default{
		name:'cityList',
		props:{
			hotCityList:{
				type: Array
			},
			allCityList:{
				type: Array
			},
			show:{
				type: Boolean
			}
		},
		data(){
			return{
				userInfo: null,
			}
		},
		methods:{
			searchCity(cityName){
				this.userInfo.searchCity = cityName;
				sessionStorage.setItem("user-info", JSON.stringify(this.userInfo));
				this.$router.push({path: '/'})
			}
		},
		mounted() {
			let current = sessionStorage.getItem("user-info");
			if(current != null){
				this.userInfo = JSON.parse(current);
				if(this.userInfo.searchCity) this.userInfo.searchCity = '';
			}
		}
	}
</script>

<style scoped>
	#cityList{
		background:#f4f4f4;
	}
	.current{
		margin: 10px 0px;
	}
	.city_text{
		margin: 0px 0px 5px 10px;
	}
	.current>.van-cell{
		color: blue;
	}
	.city_list{
		width: 100%;
		background:white;
		display: flex;
		flex-wrap: wrap;
	}
	.hotCity{
		padding: 5px 10px;
		border-radius: 5px;
		border: 1px solid gainsboro;
		margin: 5px 8px;
	}
	.loadModule{
		display: flex;
		justify-content: center;
		align-items: center;
		width:100%;
		padding: 10% 0%;
	}
</style>